<style>
.mask {
  /* background-color: rgb(0, 0, 0, 0.3); */
  /* opacity: 0.3; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.header {
  border-bottom: 1px solid black;
  height: 20px;
  width: 100%;
}
.header div {
  float: right;
  text-align: left;
  width: 120px;
}
.table {
  margin-top: 20px;
  margin-left: 10%;
  width: 80%;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #bdd7ee;
}
.detailsBox {
  width: 80%;
  height: 250px;
  margin-top: 40px;
  margin-left: 10%;
  background-color: white;
  opacity: 1;
  border-radius: 10px;
  border: 2px solid turquoise;
  z-index: 800;
  position: relative;
}
.detailsBoxHeader {
  border-bottom: 1px solid black;
  height: 40px;
  width: 100%;
}
.orderNumberDetails {
  float: left;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
}
.detailsQuit {
  float: right;
  height: 40px;
  line-height: 40px;
  margin-right: 20px;
  font-size: 20px;
}
.detailsHeader {
  width: 100%;
}
.detailsHeader div {
  width: 16%;
  float: left;
}
.details div {
  width: 16%;
  float: left;
  min-height: 20px;
  border: true;
  line-height: 20px;
}
.mskClick{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgb(0, 0, 0, 0.3);
  z-index: 450;

}
</style>
<template>
  <div class="main">
    <div v-if="showModal" class="mask" >
      <!-- <span class="mask-text">处理中，请等待...</span> -->
      <div class="mskClick" @click="detailsQuit"></div>
      <div class="detailsBox" ref="msk">
        <div class="detailsBoxHeader">
          <div class="orderNumberDetails">订货号 {{orderNumberDetails}}</div>
          <div class="detailsQuit" type="button" @click="detailsQuit">×</div>
        </div>
        <div class="detailsHeader">
          <div>明细号</div>
          <div>商品号</div>
          <div>商品名</div>
          <div>数量</div>
          <div>金额</div>
          <div>备注</div>
        </div>
        <div class="details" v-for="(item,index) of detailsList" :key="index">
          <div>{{item.detailsNumber}}</div>
          <div>{{item.productID}}</div>
          <div>{{item.productName}}</div>
          <div>{{item.quantity}}</div>
          <div>{{item.Amount}}</div>
          <div>{{item.remarks}}</div>
        </div>
      </div>
    </div>
    <div class="header">
      <div>工号：{{account}}</div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
        :header-cell-style="{background:'#C0C0C0',color:'#606266'}"
        @row-dblclick="rowDetails"
      >
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="orderNumber" label="订货号" width="180"></el-table-column>
        <el-table-column prop="orderQuantity" label="订货数量"></el-table-column>
        <el-table-column prop="orderAmount" label="订货金额"></el-table-column>
        <el-table-column prop="orderDate" label="订货日期"></el-table-column>
        <el-table-column prop="remarks" label="备考"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import axios from "axios";
export default {
  computed: {
    ...mapState({
      account: state => state.account,
      tableData: state => state.tableData
    })
  },
  data() {
    return {
      showModal: 0,
      rowDetailsData: [],
      detailsList: [],
      orderNumberDetails: ""
    };
  },
  methods: {
    rowDetails(row) {
      this.getDetails(row.id);
      this.orderNumberDetails = row.orderNumber;
      this.showModal = 1;
    },
    getDetails(id) {
      axios.get("../../static/json/test.json").then(
        response => {
          this.detailsList = response.data.detailsList;
        },
        response => {
          console.log("error");
        }
      );
    },
    detailsQuit() {
      this.showModal = 0;
      this.detailsList = [];
      this.orderNumberDetails = "";
    },
    MaskQuit(ev) {
      console.log(ev.target);
      if (!this.$refs.msk.contains(ev.target)) {
        this.showModal = 0;
      }
    }
  }
};
</script>